import Base from "../base";
import MoviesApi from "../../api/movies";
const moviesPropsRight = [
  { name: "电影名称", key: "name" },
  { name: "电影英文", key: "ename" },
  { name: "电影类型", key: "type" },
  { name: "首映地区", key: "area" },
  { name: "电影时长", key: "time" },
  { name: "是否经典", key: "isClassic" },
  { name: "上映时间", key: "upDate" },
  { name: "电影评分", key: "score" },
  { name: "电影票房", key: "count" },


];

const moviesPropsLeft = [
  { name: "电影导演", key: "director" },
  { name: "电影演员", key: "actor" },
  { name: "电影简介", key: "intro" },
];
export default class extends Base {
  //创建一个movie的空对象
  data = {
    movie: {
      name: "",
      ename: "",
      type: "",
      area: "",
      time: ``,
      upDate: "",
      score: "",
      count: "",
      intro: "",
      isClassic: "",
      director: "",
      actor: "",
    },
  };
  //渲染页面结构
  render() {
    const { movie } = this.data;
    this.$el.html(`
    <div style="margin-top:2px;">
                    <a href="/#/info/movies" style="font-size:16px;">电影列表</a><i class="layui-icon layui-icon-right" style="font-size: 16px; color: #c2c2c2;"></i>   
                    <a href="/#/info/alterMovie" style="font-size:16px;">电影详情</a><i class="layui-icon layui-icon-right" style="font-size: 16px; color: #c2c2c2;"></i> 
                </div>
         <div>
            <h1 style="width:200px;margin:auto;padding:20px;font-size:40px;font-weight:bold;">电 影 详 情</h1>
              <div>
                   <table style="font-size:20px;display:flex;margin-top:50px; width:1200px;margin:auto">
                        <tbody style="margin:20px">
                              ${moviesPropsRight.map(item => {
                                 
                                  if (item.key === "isClassic") {
                                      return `<tr>
                                                    <td style="text-align:center;font-size:26px;padding:0 20px 0 159px"><label>${item.name}</label></td>
                                                      <td>
                                                          <div style="margin:10px;font-size:20px;">
                                                           是<input type="radio" name="${item.key}" value=true  style="margin:10px;">
                                                            否<input type="radio"name="${item.key}" value=false style="margin:10px;">
                                                          </div>
                                                      </td>
                                                 </tr>`
                                  }
                                  return `    
                                     <tr>
                                        <td style="text-align:center;font-size:26px;padding:0 20px 0 159px" >${item.name}</td>
                                        <td><input type="text" value="" name="${item.key}" style="margin:7px;padding:5px;width:240px"></td>
                                      </tr>
                                         `
                                  }).join("")}
                         </tbody>
                      
                         <tbody style="margin-top:20px;margin-left:60px">
                             ${moviesPropsLeft.map(item => {
                                if (item.key == "intro") {
                                  return `
                                     <tr>
                                       <td style="text-align:center;font-size:26px;padding-right:20px;margin-right:9px"><span>${item.name}<span/></td>
                                         <td style="margin-left:9px"> 
                                           <textarea name="${item.key}" lay-verify="required" placeholder="请输入文本" class="layui-textarea" style="padding:20px 5px;position:relative;left:7px;top:11px;font-size:14px;height:342px;width:257px;border:1px solid black"></textarea>
                                        <td/> 
                                     </tr>
                                     `
                                 }
                                return `    
                                   <tr>
                                      <td style="text-align:center;font-size:26px;padding-right:20px">${item.name}</td>
                                       <td>
                                       <input type="text" value="" name="${item.key}"style="margin:7px;padding:5px;width:240px">
                                      </td>   
                                   </tr>`
                             }).join("")}  
                          </tbody>  
                    </table>            
                 <div style="width:300px;margin:30px auto">
                    <button class="layui-btn layui-btn-lg"id="alter">
                    <i class="layui-icon">&#xe642;修改电影</i>
                  </button>
                  <button class="layui-btn layui-btn-lg"id="poseter-btn">
                     <i class="layui-icon">&#xe642;修改海报</i>
                  </button>
                  <div/>
             </div>
          </div>
        `);

    // 从本地获取到旧数据
    this.oldMovie = JSON.parse(sessionStorage.getItem("changeMovie"))[0];
    //获取输入框 并将旧电影数据渲染进输入框内
    $('input[name=name]').val(this.oldMovie.name);
    $("input[name=ename]").val(this.oldMovie.ename);
    $("input[name=type]").val(this.oldMovie.type);
    $("input[name=area]").val(this.oldMovie.area);
    $("input[name=time]").val(this.oldMovie.time);
    $("input[name=upDate]").val(this.oldMovie.upDate);
    $("input[name=score]").val(this.oldMovie.score);
    $(`input[name=isClassic][value=${this.oldMovie.isClassic}]`).attr("checked",true)
    $("input[name=count]").val(this.oldMovie.count);
    $("textarea[name=intro]").html(this.oldMovie.intro);
    $("input[name=director]").val(this.oldMovie.director);
    $("input[name=actor]").val(this.oldMovie.actor);
    // this.$poseter = $("#poseter");
    // this.$poseter.html(`<img style="height:450px" src="/resource${this.oldMovie.poseter[0]}">`)
  };

  //修改电影按钮事件
  async $alterMovie() {
    let newMovie = {
      name: $('input[name=name]').val(),
      ename: $("input[name=ename]").val(),
      type: $("input[name=type]").val(),
      area: $("input[name=area]").val(),
      time: $("input[name=time]").val(),
      upDate: $("input[name=upDate]").val(),
      score: $("input[name=score]").val(),
      count: $("input[name=count]").val(),
      intro: $("textarea[name=intro]").val(),
      isClassic: $("input[name=isClassic]:checked").val(),
      director: $("input[name=director]").val(),
      actor: $("input[name=actor]").val(),
      _id: this.oldMovie._id,
    };
    console.log(newMovie);

    // 将更新后的数据传给 MoviesApi的update方法，通过_id值确认修改对象
    let data = await MoviesApi.alterMovie(newMovie);
    console.log(data);
    //删除本地数据
    sessionStorage.removeItem("changeMovie");
    // 提示修改成功，并跳转到影院信息页面
    window.alert(`修改成功`);
    // location.hash = "#/info/movies";
  }
  //修改海报按钮事件
  async $alterPoseter(){
    let data=this.oldMovie._id
    location.hash = `#/info/uploadMovies/${data}`;
  }

  // 修改按钮绑定事件
  handle() {
    $("#alter").on("click", this.$alterMovie.bind(this));
  
    $("#poseter-btn").on("click",this.$alterPoseter.bind(this));
  }

}